import React, { useEffect, useState, useRef } from "react";
import { useTranslation } from "react-i18next";
import { LeftOutlined } from "@ant-design/icons";
import { DealBox } from "./components/dealBox";
import DealRecords from "./components/dealRecords";

import shengouIcon from "../../../assets/images/dapp/shengou.svg";
import shengouActiveIcon from "../../../assets/images/dapp/shengou_active.svg";

import shuhuiIcon from "../../../assets/images/dapp/shuhui.svg";
import shuhuiActiveIcon from "../../../assets/images/dapp/shuhui_active.svg";
import RightArrowIcon from "../../../assets/images/dapp/rightArrow.svg";
import ClockIcon from "../../../assets/images/dapp/clock.svg";
import LightRightArrowIcon from "../../../assets/images/dapp/light_right_arrow.svg";

import { useHistory } from "react-router-dom";
import { use } from "i18next";

function DealIndex() {
  let history = useHistory();
  const dealBoxRef = useRef();
  const { t } = useTranslation();
  const [activeHeaderTab, setActiveHeaderTab] = useState(0);
  const [activeBodyTab, setActiveBodyTab] = useState(0); // 0-交易，1-交易记录
  const [activeBlockTab, setActiveBlockTab] = useState(0); // 0-当前交易，1-历史交易
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );
  // 切换tab
  const handleChangeTab = (index) => {
    setActiveHeaderTab(index);
    setActiveBodyTab(0)
  };

  useEffect(() => {
    console.log("history====", history);

    if (history?.location?.query?.type == "sell") {
      setActiveHeaderTab(1);
    } else {
      setActiveHeaderTab(0);
    }
  }, [history]);

  // 点击查看K线
  const handleShowKLine = () => {
    history.push("/dapp/indexOverview");
  };

  // 点击查看交易记录
  const handleShowTradingRecord = () => {
    setActiveBodyTab(1);
  };
  return (
    <>
   
      <div className="dapp-deal-page">
        <div className="header-tab">
          <div
            className={activeHeaderTab == 0 ? "active-tab" : "tab-item"}
            onClick={() => handleChangeTab(0)}
          >
            <div className="tab-icon">
              {activeHeaderTab == 0 ? (
                <img src={shengouActiveIcon} className="icon" />
              ) : (
                <img src={shengouIcon} className="icon" />
              )}
            </div>
            <div className="tab-name">{t("dappDeal.tabSubscribe")}</div>
          </div>
          <div
            className={activeHeaderTab == 1 ? "active-tab" : "tab-item"}
            onClick={() => handleChangeTab(1)}
          >
            <div className="tab-icon">
              {activeHeaderTab == 1 ? (
                <img src={shuhuiActiveIcon} className="icon" />
              ) : (
                <img src={shuhuiIcon} className="icon" />
              )}
            </div>
            <div className="tab-name">{t("dappDeal.tabRedemption")}</div>
          </div>
        </div>

        <div className="page-container">
          <div className="body-content">
            {activeBodyTab == 0 ? (
              <div className="header">
                <div className="header-nav-box">
                  <div className="header-left">
                    <div
                      className="k-line-router"
                      onClick={() => handleShowKLine()}
                    >
                      <div>{t("dappDeal.kLine")}</div>
                    </div>
                    <img
                      src={RightArrowIcon}
                      className="right-arrow-icon"
                    ></img>
                  </div>
                  <div
                    className="header-right"
                    onClick={() => handleShowTradingRecord()}
                  >
                    <img src={ClockIcon} className="clock-icon"></img>
                    <div>{t("dappDeal.dealReacord")}</div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="header">
                <div className="trading-record-header-nav-box">
                  <div
                    className="back-icon"
                    onClick={() => {
                      setActiveBlockTab(0);
                      setActiveBodyTab(0);
                    }}
                  >
                    <img src={LightRightArrowIcon}></img>
                  </div>
                  <div
                    className={activeBlockTab == 0 ? "active" : "normal"}
                    onClick={() => {
                      setActiveBlockTab(0);
                    }}
                  >
                    {t("dappDeal.currentDeal")}
                  </div>
                  <div
                    className={activeBlockTab == 1 ? "active" : "normal"}
                    onClick={() => {
                      setActiveBlockTab(1);
                    }}
                  >
                    {t("dappDeal.historyDeal")}
                  </div>
                </div>
              </div>
            )}
            {activeBodyTab == 0 ? (
              <DealBox headerType={activeHeaderTab} ref={dealBoxRef} />
            ) : (
              <DealRecords type={activeBlockTab} />
            )}
          </div>
        </div>
      </div>
    </>
  );
}

export default DealIndex;
